<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
        /*	标准盒模型的组成：
                外边距margin、边框border、内边框padding、内容的宽度 
                实际盒子的宽度=内容宽+左右内边距+左右边框
                 实际盒子的高度=内容高+上下内边距+上下边框*/
        div{
            /*   下面盒子的大小
                      宽:200+20+20+5+5=250
                      高:200+20+20+5+5=250  	*/
        	width: 200px;
        	height: 200px;
        	margin: 10px;
        	padding: 20px;
        	border: 5px solid red;
        	background: blue;
        }
        p{
                  /*      200+20+20+10+10=260
                          300+10+30+10+10=360	*/
        	width: 200px;
        	height: 300px;
        	padding-top: 20px;
        	padding: 10px 20px 30px;
        	border: 10px solid red;
        	background: green;
        }
	</style>
</head>
<body>
<div></div>
</body>
</html>